<template>
  <div>
    <Table>
      <template v-slot:btn="{ id }">
        <button @click="showDetail(id)">查看详情</button>
        <button @click="editBook(id)">编辑</button>
        <button @click="deleteBook(id)">删除</button>
      </template>
    </Table>
    <button @click="addBook">添加图书</button>

    <InfoPage
      :type="type"
      @cancel="showFlag = false"
      v-if="showFlag"
    ></InfoPage>
  </div>
</template>
<script>
import { getBook, deleteBook, getBookDetail } from "@/api/bookApi/bookApi.js";
import InfoPage from "./10zuoye/book/InfoPage.vue";
import Table from "./10zuoye/book/Table.vue";
export default {
  name: "",
  components: {
    Table,
    InfoPage,
  },
  data() {
    return {
      type: 0,
      showFlag: false,
    };
  },
  async created() {
    const res = await getBook();
    // console.log(res.data.data);
    this.$store.commit("book/setBookList", res.data.data);
  },
  computed: {},
  methods: {
    async showDetail(id) {
      const res = await getBookDetail(id);
      // console.log(res.data.data, 888);
      this.$store.commit("book/setBookDetail", res.data.data);
      this.showFlag = true;
      this.type = 0;
    },
    addBook() {
      this.showFlag = true;
      this.type = 1;
    },
    async editBook(id) {
      const res = await getBookDetail(id);
      // console.log(res.data.data, 888);
      this.$store.commit("book/setBookDetail", res.data.data);
      this.showFlag = true;
      this.type = 2;
    },
    async deleteBook(id) {
      await deleteBook(id);
      const res = await getBook();
      this.$store.commit("book/setBookList", res.data.data);
    },
  },
};
</script>
<style lang='less'  scoped>
</style>
